<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">


    <title>武侯祠管理系统</title>
    
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <!-- <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> -->
    <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/> 
    <style type="text/css">
        #container{
            width: 55%;
            height: 80%;
            margin-top: 84px;
            margin-left: 9%;
        }
        #spot{
            height: 80%;
            float: right;
            width: 25%;
            margin-top: 0px;
            margin-right: 9%;
            padding-top: 24px;
        }
        .myNav{
            margin-bottom: 20px;
        }
        .myFile{
            padding-left: 1.2rem;
            padding-right: 1.2rem;
            margin-top: 10px;
        }
        #save{
            margin-top: 30px;
        }
        .amap-marker-label {
            border: #fff solid 0px;
            border-radius: 5px;
            background: #6A7FBB;
            color: #fff;
            font-size: 15px;
            padding: 10px;

        }

    </style>


   
</head>

<body class = " light-green lighten-4">
 <!--   <script src="http://cache.amap.com/lbs/static/es5.min.js"></script> -->
    

    <nav class="myNav">
      <div class="nav-wrapper   light-green darken-4">
        <a href="" class="brand-logo">&nbsp武侯祠管理系统</a>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
          <li><a href="./main2.html">主页</a></li>
          <li><a href="./spot.html">景点</a></li>
          <li><a href="./food.html">美食</a></li>
          <li><a href="./toilet.html">厕所</a></li>
          <li><a href="./news.html">新闻</a></li>
          <li><a href="./broadcast.html">广播</a></li>
          <li><a href="./feedback.html">反馈</a></li>
          <li><a href="./password.html">设置</a></li>
        </ul>
      </div>
    </nav>


    <div id="container" class = "card"></div>

    <div id="spot" class="card row">
        <form class="col s12  center-align" id= "uploadForm" enctype="multipart/form-data">
            <div class="row ">
                <div class="input-field col s12 ">
                    <input  id="spot_name" type="text" class="validate">
                    <label for="spot_name" id="label_name">景点名称</label>
                </div>
                <div class="input-field col s12">

                    <textarea id="introduction" class="materialize-textarea" style="max-height:100px"></textarea>
                    <label for="introduction" id="label_intro">景点简介</label>

                </div>
                <div  class="input-field col s12">
                    <select id="score" class=".selector">
                        <option value="" disabled selected>选择推荐指数</option>
                        <option value="1">一星</option>
                        <option value="2">二星</option>
                        <option value="3">三星</option>
                        <option value="4">四星</option>
                        <option value="5">五星</option>

                    </select>
                    <label>景点推荐指数</label>
                </div>

                <div class="input-field col s12 file-field " >
                    <div class="btn  light-green darken-2 myFile" >
                        <span>图片</span>
                        <input type="file" name="image1" id="file1">
                    </div>
                    <div class="file-path-wrapper">
                        <input class="file-path validate" type="text" name="image">
                    </div>
                </div>
                <div class="input-field col s12 file-field ">
                    <div class="btn  light-green darken-2 myFile">
                        <span>音频</span>
                        <input type="file" name="voice1" id="file2" >
                    </div>
                    <div class="file-path-wrapper">
                        <input class="file-path validate" type="text" name="voice">
                    </div>
                </div> 
                    <a class="waves-effect light-green darken-2 btn" onclick="doUpload()" id="save">保存</a>
                <div >
                </div>    

            </div>
       
        </form>
    </div>


    <script type="text/javascript" src="js/jquery-2.2.0.min.js"></script>
    <script type="text/javascript" src="js/materialize.min.js"></script>

    <script src="http://webapi.amap.com/maps?v=1.3&key=e843bab8ae313a72cea9ed68ef713efd"></script>
    <script src="js/main.js"></script>
    <script type="text/javascript">
        var lut = []; for (var i=0; i<256; i++) { lut[i] = (i<16?'0':'')+(i).toString(16); }
        var spots;
        var num = 0;
        var deviceID;
        var base_url = "http://192.168.21.14:8000/";
        $(document).ready(function() {
          generateUUID();
          deviceID = getUUID();  

          $('select').material_select();
          var op = document.getElementById("score").options;
          op[1].selected = true;
          $('#score').val(2);

          var settings = {
            type: "POST",
            url: "http://192.168.21.14:8000/info/get_spot_list",
            dataType: "json",
            data:{
                device_id:deviceID,
                start:0,
                num:-1    
            },
            success: function(data,textStatus) {
                // alert("init success");
                spots = data;
                console.log(JSON.stringify(data));
                console.log(data.length);
                makeMap();

            },
            error: function(XHR, textStatus, errorThrown) {
                // alert("网络错误" + JSON.stringify(XHR));
            },
        };
        $.ajax(settings);
        });
        var map = new AMap.Map('container', {
            resizeEnable: true,
            zoom:18,
            center:[104.048022,30.646217]     
        });
        var marker = null;
        removePoint();

        var lng, lat;
        map.on('click',function(a){
            lng = a.lnglat.getLng();
            lat = a.lnglat.getLat(); 
            console.log(lng);
            console.log(lat);
            console.log(JSON.stringify(spots));

          
            for(var i = 0;i<spots.length;i++){
                if( (Math.abs(lng - spots[i].longitude ) < 0.00008) & (Math.abs(lat-spots[i].latitude ) < 0.00008) ){
                    console.log(i);
                    num = spots[i].id;
                   
                    var settings = {
                        type: "POST",
                        url: "http://192.168.21.14:8000/info/get_spot",
                        dataType: "json",
                        data:{
                            device_id:deviceID,
                            id:num   
                        },
                        success: function(data,textStatus) {
                            //alert("click");
                            openInfo(data);
                            setContent(data);

                        },
                        error: function(XHR, textStatus, errorThrown) {
                            alert("网络错误" + XHR);
                        },
                    };
                    $.ajax(settings);
                    break;
                }
                else{               
                }               
            } 
        });
        

        function setContent(data) {
            $('#label_intro').addClass( "active" );
            $('#label_name').addClass( "active" );
            console.log(JSON.stringify(data));
            $('#spot_name').val(data.name);
            $('#introduction').val(data.introduction);
            $("#score").val(data.score);
            $('select').material_select();
            // alert($("#score"));
            // $('#file1').val("8.jpg");

        }

        function doUpload() {            
            var name = $('#spot_name').val();
            var introduction = $('#introduction').val();
            var options = $('#score option:selected');
            var score = options.val();
            // if(lng == undefined){
            //     alert("请在地图上选择标记！");
            // }
            // else if (name == undefined || introduction == undefined || score == undefined) {
            //     alert("请完善景点信息！");
            // }
            // else{
            var formData = new FormData();     
            console.log(name);
            console.log(introduction);
            console.log(score);
            formData.append("id",num);
            formData.append("name",name);
            formData.append("introduction",introduction);
            formData.append("score",score);
            formData.append("longitude",lng);
            formData.append("latitude",lat);
            var simpleFile1 = document.getElementById("file1").files[0];
            formData.append("picture",simpleFile1);
            var simpleFile2 = document.getElementById("file2").files[0];
            formData.append("voice",simpleFile2);
            // }

            $.ajax({
                url: 'http://192.168.21.14:8000/admin/update_spot' ,
                type: 'POST',
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                success: function (data) {
                   // alert(returndata);
                  alert(JSON.stringify(data));
                },
                error: function (data) {
                  // alert(returndata);
                  alert("fail");
                }
            });
       
        }       

        function getUUID() {
        var uuid = getCookie("device_id");
        if (!uuid) {
            uuid = generateUUID();
            setCookie("device_id",uuid,1);
        }
        return uuid;
        }

        function addMarker(addLng,addLat) {
            if(marker) { return; }
            marker = new AMap.Marker({
                icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
                position: [addLng, addLat]
            });
            marker.setMap(map);
            // marker.setTitle(title);
        }        
        function generateUUID(){
            var d0 = Math.random()*0xffffffff|0;
            var d1 = Math.random()*0xffffffff|0;
            var d2 = Math.random()*0xffffffff|0;
            var d3 = Math.random()*0xffffffff|0;
            
            return lut[d0&0xff]+lut[d0>>8&0xff]+lut[d0>>16&0xff]+lut[d0>>24&0xff]+'-'+
            lut[d1&0xff]+lut[d1>>8&0xff]+'-'+lut[d1>>16&0x0f|0x40]+lut[d1>>24&0xff]+'-'+
            lut[d2&0x3f|0x80]+lut[d2>>8&0xff]+'-'+lut[d2>>16&0xff]+lut[d2>>24&0xff]+
            lut[d3&0xff]+lut[d3>>8&0xff]+lut[d3>>16&0xff]+lut[d3>>24&0xff];
        }

        function makeMap(){
            for(var i = 0;i<spots.length;i++){
                var mapMarker = new AMap.Marker({
                    icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
                    position: [spots[i].longitude, spots[i].latitude]
                });
                mapMarker.setMap(map); 
                // markers.push(mapMarker);
            }
        }
        function removePoint() {
            var features = [];
            features.push("bg");
            features.push("road");
            features.push("building");
            map.setFeatures(features);
        }
            //在指定位置打开信息窗体
	    function openInfo(spot_detail) {
	        //构建信息窗体中显示的内容
	        var info = [];
	        console.log(spot_detail.image);
	        info.push("<div>");
	        info.push("<div><img style=\"float:left;width:200px;\" src=\"http://192.168.21.14:8000/static/image/spot/" + spot_detail.image + "\"/></div>");
	        info.push("<audio id=\"mp3\" src=\"" + getSpotVoice(spot_detail.voice) + "\" loop> browser does not support the audio element.</audio>");
	        info.push("<img style=\"width:50px;float:left;margin-top:10px;margin-left：10px;\" id=\"speaker\" onclick=\"togglePlayPause()\" src=\"./img/voice.png\"/><h5 style=\"line-height:50px;\">&nbsp;&nbsp;&nbsp;"+spot_detail.name+"</h5>");
	        // info.push("<p></p>");
	        info.push("</div>");
	        infoWindow = new AMap.InfoWindow({
	            content: info.join("<br/>")  //使用默认信息窗体框样式，显示信息内容
	        });
	        infoWindow.open(map, [spot_detail.longitude,spot_detail.latitude]);
	        // $('#mp3').attr("src",getSpotVoice(spot_detail.voice));
	        // $('#speaker').click(function() {
	        	// alert("click");
	        	// togglePlayPause();
	        // })
	    }
	    function getSpotVoice(voice_name) {
			return base_url + "static/voice/spot/"+voice_name;
		}
		function togglePlayPause() {
		   var mp3 = document.getElementById("mp3");
		   if (mp3.paused || mp3.ended) {
		   		console.log("mp3 played");
		      	mp3.play();
		   } else {
		   		console.log("mp3 paused");
		      	mp3.pause();
		   }
		}
    </script>

</body>
</html>